<template>
  <div 
    :class="[
      'bx-list',
      'bx-glass',
      {
        'bx-list--bordered': bordered,
        'bx-list--stripe': stripe,
        [`bx-list--${size}`]: size
      }
    ]"
  >
    <div v-if="header || $slots.header" class="bx-list__header">
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="bx-list__body">
      <ul class="bx-list__content">
        <slot></slot>
        <li v-if="!$slots.default && data.length === 0" class="bx-list__empty">
          <BxEmpty description="无数据" size="small" />
        </li>
        <template v-else-if="data.length > 0">
          <BxListItem v-for="(item, index) in data" :key="index">
            <slot name="item" :item="item" :index="index">{{ item }}</slot>
          </BxListItem>
        </template>
      </ul>
    </div>
    <div v-if="footer || $slots.footer" class="bx-list__footer">
      <slot name="footer">{{ footer }}</slot>
    </div>
  </div>
</template>

<script>
import BxEmpty from '../data-display/BxEmpty.vue'
import BxListItem from './BxListItem.vue'

export default {
  name: 'BxList',
  components: {
    BxEmpty,
    BxListItem
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    header: {
      type: String,
      default: ''
    },
    footer: {
      type: String,
      default: ''
    },
    bordered: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    }
  }
}
</script>

<style scoped>
.bx-list {
  border-radius: var(--bx-radius-medium);
  overflow: hidden;
  font-family: var(--bx-font-family);
  color: var(--bx-text-primary);
}

.bx-list--bordered {
  border: 1px solid var(--bx-glass-border);
}

.bx-list__header,
.bx-list__footer {
  padding: 12px 16px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid var(--bx-glass-border);
}

.bx-list__footer {
  border-top: 1px solid var(--bx-glass-border);
  border-bottom: none;
}

.bx-list__body {
  padding: 0;
}

.bx-list__content {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bx-list__empty {
  padding: 24px;
  text-align: center;
  color: var(--bx-text-tertiary);
}

/* Size variations */
.bx-list--small .bx-list__header,
.bx-list--small .bx-list__footer {
  padding: 8px 12px;
  font-size: 13px;
}

.bx-list--large .bx-list__header,
.bx-list--large .bx-list__footer {
  padding: 16px 20px;
  font-size: 15px;
}

/* Responsive */
@media (max-width: 768px) {
  .bx-list__header,
  .bx-list__footer {
    padding: 10px 14px;
  }
}
</style>

